<template>
  <div class="container">
    <div class="add">
      <h3>验收项目</h3>
      <el-button
        size="mini"
        icon="el-icon-plus"
        type="primary"
        plain
        v-if="!unEdit"
        @click="addBaseParam"
      >
        新增
      </el-button>
    </div>
    <base-table
      :tableSetting="baseTableSetting"
    ></base-table>
    <dialogPublic
      :title="title"
      :show.sync="show"
      v-if="show"
      @doSubmit="doSubmit"
      @doClose="() => (show = false)"
    >
      <fieldset>
        <legend>验收项目</legend>
        <editForm
          :formConfig="formConfig"
          ref="editForm"
          :formData="editFormData"
        ></editForm>
      </fieldset>
    </dialogPublic>
  </div>
</template>

<script>
export default {
  props: {
    checkedProjectList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    unEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "",
      show: false,
      //基本参数
      baseTableSetting: {
        indexShow: true,
        column: [
          {
            label: "分级分项名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "专业",
            textAlign: "center",
            prop: "major",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "common_major",
                row.major
              );
            },
          },
          {
            label: "验收级别",
            textAlign: "center",
            prop: "level",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "standard_check_level",
                row.level
              );
            },
          },
          {
            label: "操作",
            textAlign: "center",
            type: "button",
            buttonArr: [
              {
                text: "编辑",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.rowIndex = index;
                  this.editBaseParam(row);
                },
              },
              {
                text: "查看",
                isShow: () => {
                  return this.unEdit;
                },
                methods: (row, index) => {
                  this.editFormData = row;
                  this.show = true;
                },
              },
              {
                text: "删除",
                isShow: () => {
                  return !this.unEdit;
                },
                methods: (row, index) => {
                  this.$confirm("确定要删除该条数据吗", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                  })
                    .then(() => {
                      this.baseTableSetting.data.splice(index, 1);
                    })
                    .catch((e) => {});
                },
              },
            ],
          },
        ],
        data: [],
        noBorderRight: false,
        autoHeight: true,
        //height: 400,
      },
      //弹出框表单配置信息
      formConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "分级分项名称",
            prop: "name",
            type: "text",
            maxlength: 20,
            span: 12,
            required: true,
            disabled: false,
          },
          {
            label: "验收级别",
            prop: "level",
            type: "select",
            span: 12,
            required: true,
            disabled: false,
            selectOption: this.$store.getters.dirtData("standard_check_level"),
          },
          {
            label: "专业",
            prop: "major",
            type: "select",
            span: 12,
            required: true,
            disabled: false,
            selectOption: this.$store.getters.dirtData("common_major"),
          },
          {
            label: "项目描述",
            prop: "context",
            type: "textarea",
            span: 24,
            rows: 4,
            required: true,
            disabled: false,
          },
          {
            label: "验收标准",
            prop: "contextStandard",
            type: "textarea",
            span: 24,
            rows: 4,
            required: true,
            disabled: false,
          },
        ],
      },
      //弹出框表单数据
      editFormData: {},
      rowIndex: 0,
    };
  },
  watch: {
    checkedProjectList: {
      handler(val) {
        this.baseTableSetting.data = val;
      },
      deep: true,
    },
    unEdit: {
      handler(val) {
        this.formConfig.itemArr.forEach((i) => (i.disabled = val));
      },
    },
  },
  created() {
    this.baseTableSetting.data = this.checkedProjectList;
    this.formConfig.itemArr.forEach((i) => (i.disabled = this.unEdit));
  },
  methods: {
    //添加自定义参数
    addBaseParam() {
      this.title = "添加自定义参数";
      this.show = true;
      this.editFormData = {};
    },
    //编辑自定义参数
    editBaseParam(row) {
      this.title = "编辑自定义参数";
      this.editFormData = Object.assign({}, row);
      this.show = true;
    },
    //提交表单
    async doSubmit() {
      try {
        let row = await this.$refs.editForm.getFormData();
        if (this.title == "添加自定义参数") {
          this.baseTableSetting.data.push(row);
        } else {
          this.baseTableSetting.data.splice(this.rowIndex, 1, row);
        }
        this.show = false;
      } catch (error) {
        this.$message.warning(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .add {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    h3::before {
      content: "*";
      color: red;
      margin-right: 4px;
    }
  }
  fieldset {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 0 30px 0 10px;
    margin-top: 10px;
  }
  legend {
    margin-left: 30px;
    text-align: left;
  }
  .paramList {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px #d7dae2 solid;
    padding: 0 30px 0 30px;
    margin-top: 10px;
  }
}
</style>
